<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
// 获取备货列表
import { getPurchasePage } from "@/api/orderManag/shipperPrepar";
import { useColumns } from "../utils/columns";
import { ImageViewer } from "@/components/common/ImageViewer";
import { FileUpload } from "@/components/common/FileUpload/index";
import { clearNoNum, clearSuffix } from "@/utils/inupt";
import { dealDataExcept } from "@/utils/common";

const { stockcolumns, stockChildColumns } = useColumns();

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    purchaseOrderCode: undefined,
    purchaseOrderId: undefined,
    depositoryId: undefined,
    itemList: [],
    fareImageJson: undefined,
    sendImageJson: undefined,
    fare: undefined,
    fareType: 0,
    stockStatus: 2
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
function getRef() {
  return ruleFormRef.value;
}

const dataLoading = ref(false);
// 搜索备货订单号
async function searchGoods() {
  if (!newFormInline.value.purchaseOrderCode) {
    newFormInline.value.fareType = 0;
    newFormInline.value.itemList = [];
    return;
  }

  dataLoading.value = true;
  const params = {
    onlyMySelf: false,
    purchaseOrderCode: newFormInline.value.purchaseOrderCode,
    pageNum: 1,
    pageSize: 1
  };
  const { data } = await getPurchasePage(params);
  dataLoading.value = false;
  if (!data.records || data.records.length == 0) {
    newFormInline.value.fareType = 0;
    newFormInline.value.itemList = [];
    return;
  }

  newFormInline.value.itemList = data.records;

  let orderData = data.records[0];
  newFormInline.value.purchaseOrderId = orderData.id;
  newFormInline.value.depositoryId = orderData.depositoryId;
  newFormInline.value.fareType = orderData.fareType;
  /**
   * fareType 运费类型 1包邮 2提前支付 3到付
   * 如果是到付的订单，一开始没写运费，默认带出0
   */
  // if (orderData.fareType == 3) {
  //   newFormInline.value.fare = dealDataExcept(orderData.fare);
  // }
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
  >
    <div class="text-black text-[15px] mb-4 ml-4 font-bold">订单信息</div>
    <el-row>
      <el-col :span="10" class="ml-10">
        <el-form-item label="备货订单编号" prop="purchaseOrderCode">
          <el-input
            v-model.trim="newFormInline.purchaseOrderCode"
            placeholder="输入备货订单编号后回车选择"
            clearable
            @change="searchGoods"
          >
            <template #suffix>
              <el-icon class="el-input__icon">
                <IconifyIconOffline
                  v-show="!newFormInline.purchaseOrderCode"
                  icon="ri:search-line"
                />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="text-black text-[15px] mb-4 ml-4 font-bold">商品明细</div>
    <div class="b-content border !mt-0">
      <el-row>
        <el-col :span="24">
          <pure-table
            ref="tableRef"
            row-key="id"
            align-whole="center"
            showOverflowTooltip
            table-layout="auto"
            :loading="dataLoading"
            :data="newFormInline.itemList"
            :columns="stockcolumns"
            height="400px"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
          >
            <template #expand="{ row }">
              <div class="ml-[40px]">
                <pure-table
                  row-key="id"
                  align-whole="center"
                  :data="row.itemList"
                  :columns="stockChildColumns"
                  :header-cell-style="{
                    background: 'var(--el-fill-color-light)',
                    color: 'var(--el-text-color-primary)'
                  }"
                >
                  <!-- 商品名称/规格名称 -->
                  <template #specName="scope">
                    <div class="flex items-center mr-[-12px]">
                      <ImageViewer
                        :src="scope.row.specImageJson || row.imageJson"
                      />
                      <el-tooltip
                        effect="dark"
                        :content="scope.row.specName || scope.row.goodsName"
                        placement="top-start"
                      >
                        <span class="ml-[5px] truncate">
                          {{ scope.row.specName || scope.row.goodsName }}
                        </span>
                      </el-tooltip>
                    </div>
                  </template>
                  <!-- 商品编码/规格编码 -->
                  <template #specCode="{ row }">
                    <el-tooltip
                      effect="dark"
                      :content="row.specCode || row.goodsCode"
                      placement="top-start"
                    >
                      <div class="text-cut">
                        {{ row.specCode || row.goodsCode }}
                      </div>
                    </el-tooltip>
                  </template>
                </pure-table>
              </div>
            </template>
          </pure-table>
        </el-col>
      </el-row>
    </div>
    <div class="text-black text-[15px] mb-4 ml-4 font-bold">入库凭证</div>
    <el-row>
      <el-col :span="24">
        <el-form-item label="上传送货单" prop="sendImageJson">
          <FileUpload
            v-model="newFormInline.sendImageJson"
            :fileType="['jpg', 'png']"
            :limit="1"
            :maxSize="2"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <!-- fareType 运费类型 1包邮 2提前支付 3到付 -->
    <el-row v-if="newFormInline.fareType != 1">
      <el-col :span="24">
        <el-form-item label="上传运费单" prop="fareImageJson">
          <FileUpload
            v-model="newFormInline.fareImageJson"
            :fileType="['jpg', 'png']"
            :limit="1"
            :maxSize="2"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="newFormInline.fareType == 3" class="mb-10">
      <el-col :span="8">
        <el-form-item label="到付运费" prop="fare">
          <el-input
            v-model="newFormInline.fare"
            clearable
            placeholder="请输入"
            @input="newFormInline.fare = clearNoNum($event)"
            @blur="
              newFormInline.fare = Number(clearSuffix(newFormInline.fare + ''))
            "
          >
            <template #suffix>元</template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<style lang="scss" scoped>
.b-content {
  margin: 15px 0 20px 40px;
}
.b-content.border {
  padding: 10px;
  border: 1px solid #efefef;
  border-radius: 8px;
}
// :deep(.icon-no .el-table__expand-icon) {
//   display: none;
// }
// :deep(.el-table__expanded-cell) {
//   padding: 0;
// }
</style>
